<template>
  <div class="card">
    <aside>
      <i :style="{ color: iconColor }" :class="icon"></i>
    </aside>
    <article>
      <p>
        {{ name }}
        <span :style="{ color: nameRightColor }">{{ nameRight }}</span>
      </p>
      <p>{{ namebot }} {{ namebotRig }}</p>
    </article>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";

export default {
  props: {
    name: String,
    nameRight: String,
    namebot: String,
    namebotRig: String,
    icon: String,
    iconColor: String,
    nameRightColor: String,
  },
  setup(props, { emit }) {
    return {};
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 160px;
  border-bottom: 1px solid rgb(243, 243, 243);
  background-color: #fff;
  display: flex;
  align-items: center;
  aside {
    width: 20%;
    height: 100%;
    line-height: 160px;
    text-align: center;
  }
  article {
    p {
      &:nth-of-type(1) {
        font-size: 28px;
        margin-bottom: 38px;
      }
      &:nth-of-type(2) {
        font-size: 22px;
        color: rgb(129, 128, 128);
      }
    }
  }
}
</style>
